<script>

import {MyMapOpt} from "@/class/map/myMapOpt";
import EditPolygon from "@/views/map/dialog/MapEditElement/EditPolygon.vue";
import {mapActions, mapMutations, mapState} from "vuex";
import {requestIsSuccess} from "@/api/request";
import EditMarker from "@/views/map/dialog/MapEditElement/EditMarker.vue";
import EditPolyline from "@/views/map/dialog/MapEditElement/EditPolyline.vue";
import {MapData} from "@/class/map/MapData";
import {Marker, MarkerData} from "@/class/map/Maker";
import {getRandomColor} from "@/utils/utils";
import {Polyline, PolylineData} from "@/class/map/Polyline";
import {Polygon, PolygonData} from "@/class/map/Polygon";

export default {
  name: "EditDialog",
  components: {EditPolyline, EditMarker: EditMarker, EditPolygon},
  watch: {
    addType: {
      immediate: true,
      handler(newVal) {
        if (this.dialogType === MyMapOpt.DialogType.AddData) {
          let element = undefined
          const mapData = new MapData({
            type: newVal,
            name: newVal + Date.now(),
            top: false,
            coordsys: MyMapOpt.MapCoordSys.CJ02,
          });
          switch (newVal) {
            case MyMapOpt.MapType.Marker:
              const marker = new Marker({
                position: [116.397484, 39.90912]
              })
              element = new MarkerData({mapData,marker});
              break;
            case MyMapOpt.MapType.Polyline:
              const polyline = new Polyline({
                path: [[116.392128, 39.922459], [116.39259, 39.913531], [116.396262, 39.913663], [116.396287, 39.913115], [116.392073, 39.912907], [116.392048, 39.912302], [116.391654, 39.912359], [116.391927, 39.907803], [116.403189, 39.907992], [116.402573, 39.913266], [116.398482, 39.913209], [116.39831, 39.913739], [116.401858, 39.913776], [116.401464, 39.922848]],
                strokeColor: getRandomColor()
              })
              element = new PolylineData({mapData,polyline});
              break;
            case MyMapOpt.MapType.Polygon:
              const polygon = new Polygon({
                path: [[116.392128, 39.922459], [116.39259, 39.913531], [116.396262, 39.913663], [116.396287, 39.913115], [116.392073, 39.912907], [116.392048, 39.912302], [116.391654, 39.912359], [116.391927, 39.907803], [116.403189, 39.907992], [116.402573, 39.913266], [116.398482, 39.913209], [116.39831, 39.913739], [116.401858, 39.913776], [116.401464, 39.922848]],
                strokeColor: getRandomColor(),
                fillColor: getRandomColor(),
                fillOpacity: 0.5,
              })
              element = new PolygonData({mapData, polygon});
              break;
          }
          this.setElement(element);
        }
      }
    }
  },
  computed: {
    setElementType:{
      get(){
        return this.addType
      },
      set(val){
        this.setAddType(val)
      }
    },
    MyMapOpt() {
      return MyMapOpt
    },
    ...mapState("EditElement",{
          element : "element",
          visible : "visible",
          dialogType : "dialogType",
          addType:"addType",
        }),
    getTitle(){
      switch (this.dialogType){
        case MyMapOpt.DialogType.EditData:
          return "编辑数据";
        case MyMapOpt.DialogType.AddData:
          return "新增数据";
      }
    }
  },
  methods:{
    /**
     * 关闭修改窗口，并修改数据
     */
    async saveEditDialog() {
      let result = await this.saveToStore()
      if (result) {
        this.$emit("save");
        await this.closeEditDialog();
      }
    },
    /**
     * 关闭修改窗口，并删除数据
     */
    deleteAndCloseEditDialog() {
      this.deleteEditDialog();
      this.$emit("save")
      this.closeEditDialog()

    },
    ...mapActions("EditElement",{
      closeEditDialog: "closeEdit",
      saveToStore:"saveEditDialog",
      setElement:"setElement",
      deleteEditDialog:"deleteEditDialog",
    }),
    ...mapMutations("EditElement",{
      setAddType:"SET_ADD_TYPE"
    }),
  },
  data(){
    return {

    }
  },
  emits:['close','cancel','save'],
  mounted() {
/*    if(this.editDialogData.element.mapData.type===MyMapOpt.MapType.Marker)
      this.dialogData.position=this.editDialogData.element.getElement().position
    else
      this.dialogData.path=this.editDialogData.element.getElement().path*/
  }
}
</script>

<template>

  <!--  修改数据  -->
  <el-dialog :title="getTitle"  :visible="visible" @close="closeEditDialog" width="300px">
    <div>
      <table class="tb">
        <tr v-if="dialogType===MyMapOpt.DialogType.AddData">
          <td class="td-name">类型</td>
          <td class="td-data">
            <el-select v-model="setElementType" class="rightInput">
              <el-option  :value="MyMapOpt.MapType.Marker" label="点"></el-option>
              <el-option  :value="MyMapOpt.MapType.Polyline" label="线"></el-option>
              <el-option  :value="MyMapOpt.MapType.Polygon" label="面"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="td-name">名称</td>
          <td class="td-data">
            <el-input v-model="element.mapData.name"></el-input>
          </td>
        </tr>
       <tr>
          <td class="td-name">时间</td>
          <td class="td-data">
            <el-input v-model="element.mapData.createTime" :disabled="true"></el-input>
          </td>
        </tr>

        <tr>
          <td class="td-name">置顶数据</td>
          <td class="td-data">
            <el-switch v-model="element.mapData.top"/>
          </td>
        </tr>
        <tr>
          <td class="td-name">坐标系统</td>
          <td class="td-data">
            <el-select v-model="element.mapData.coordsys" class="rightInput">
              <el-option v-for="coordys in MyMapOpt.MapCoordSys" :value="coordys" :label="coordys"></el-option>
            </el-select>
          </td>
        </tr>
<!--


        <tr>
          <td class="td-name">数据</td>

        </tr>-->
      </table>
      <EditPolygon v-if="this.addType === MyMapOpt.MapType.Polygon"/>
      <EditMarker v-else-if="this.addType === MyMapOpt.MapType.Marker"/>
      <EditPolyline v-else-if="this.addType === MyMapOpt.MapType.Polyline"/>
    </div>
    <div slot="footer" class="dialog-footer">
      <div v-if="dialogType===MyMapOpt.DialogType.EditData">
        <el-button type="danger"  @click="deleteAndCloseEditDialog">删除数据</el-button>
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="saveEditDialog">确 定</el-button>
      </div>
      <div v-else>
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="saveEditDialog">上 传</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<style scoped>

</style>